<template>
    <div class="banxin">
        <main class="tanxin">
            <aside>
                <img class="avatar" :src="userInfo.headImg" alt="" />
                <div class="userInfo">
                    <p class="p1">
                        {{ userInfo.nickName }}<strong @click="loginOut">[退出]</strong>
                    </p>
                </div>
                <div class="title">
                    <img src="../assets/images/person/transaction.png" alt="" /> 交易管理
                </div>
                <ul>
                    <li @click="$router.push('/user/center')" :class="{ 'active': $route.path.includes('center') }">个人中心
                    </li>
                    <li @click="asideActive = 2" :class="{ 'active': asideActive === 2 }">我的订单</li>
                    <li @click="$router.push('/user/cart')" :class="{ 'active': $route.path.includes('cart') }">购物车</li>
                    <li @click="asideActive = 4" :class="{ 'active': asideActive === 4 }">消息通知</li>
                    <li @click="asideActive = 5" :class="{ 'active': asideActive === 5 }">积分明细</li>
                    <li @click="asideActive = 6" :class="{ 'active': asideActive === 6 }">积分攻略</li>
                </ul>
                <div class="title">
                    <img src="../assets/images/person/information.png" alt="" />
                    个人信息管理
                </div>
                <ul>
                    <li @click="asideActive = 7" :class="{ 'active': asideActive === 7 }">地址管理</li>
                    <li @click="asideActive = 8" :class="{ 'active': asideActive === 8 }">账号安全</li>
                </ul>
            </aside>
            <!-- 显示动态变化的路由的对应组件 -->
            <article>
                <router-view></router-view>
            </article>
        </main>
    </div>
</template>


<script>
import { getUserInfoApi } from "@/request/api"
export default {
    data() {
        return {
            asideActive: 0,
            userInfo: [],
        };


    },
    created() {
        getUserInfoApi().then((res) => {
            // console.log(res.data.data);
            if (res.data.code === 0) {
                let { userInfo } = res.data.data;
                // console.log(userInfo);
                this.userInfo = userInfo;
                // this.isLogin = true;
            }
        });
    },
    components: {
        // Breadcrumb,
    },
    methods: {
        loginOut() {
            localStorage.removeItem("x-auth-token");
            this.$router.push('/');
            this.$store.state.isLogin=false
            location.reload()
        },
    },
};
</script>
 
<style lang = "less" scoped>
@import "../assets/base.less";


main {
    border-top: 2px solid #ececec;
    padding-bottom: 50px;
    min-height: 740px;


    aside {
        width: 200px;
        background: #e7e7e7;
        margin-right: 60px;


        .avatar {
            width: 100px;
            height: 100px;
            display: block;
            margin: 30px auto 19px;
        }


        .userInfo {
            text-align: center;
            margin-bottom: 43px;


            a {
                text-decoration: none;
                color: @blue;
            }


            .p1 {
                cursor: pointer;
            }
        }


        .title {
            display: flex;
            align-items: center;
            padding-left: 18px;
            margin-bottom: 17px;


            img {
                margin-right: 6px;
            }
        }


        ul {
            padding-left: 20px;


            li {
                margin-bottom: 18px;
                color: #666666;
                cursor: pointer;


                &.active {
                    border-left: 2px solid @blue;
                    padding-left: 10px;
                    color: @blue;
                }
            }
        }
    }
    article {
        flex: 1;
    }
}
</style>